<template>
  <div class="app-container">
    <el-form v-loading="formLoading" :model="queryParam" ref="queryForm" :inline="true" :rules="rules">
    <el-form-item label="选择班级：" prop="className"  required>
        <el-select v-model="queryParam.className" filterable clearable placeholder="请选择班级" @click="getClass"> 
          <el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.className"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名：" prop="stuName" >
        <el-input v-model="queryParam.stuName" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        </el-form-item>
    </el-form>
          
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="stuId" label="学生编号" width="180px"/>
      <el-table-column prop="stuName" label="学生姓名" width="260px;"/>
      <el-table-column prop="courseName" label="课程" />
      <el-table-column prop="examPaperName" label="试卷" />
      <el-table-column prop="examGrade" label="分数" width="180px;"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>
// import { mapGetters, mapState, mapActions } from 'vuex'
// import Pagination from '@/components/Pagination'
  // import studentApi from '@/api/xzs/student'
  // import classApi from '@/api/xzs/class'
  // import gradeApi from '@/api/xzs/grade'
export default {
  components: { Pagination},
  data () {
    return {
      queryParam: {
        className:null,
        stuName:null,
        courseName:null,
        pageIndex: 1,
        pageSize: 10
      },
    rules: {
        className: [
          { required: true, message: '请选择班级', trigger: 'change' }
        ],
        stuName: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' }
          ]
      },
      formLoading: false,
      listLoading: true,
      tableData: [],
      total: 0
      }
  },
  created () {
    //this.initSubject()
    this.getClass();
    this.page()
  },
  methods: {
    search () {
      this.listLoading = true
      gradeApi.search({className:this.queryParam.className,courseName: this.queryParam.courseName,stuName: this.queryParam.stuName}).then(data => {
      this.tableData = data.response
      this.listLoading = false
      })
    },
    page () {
      this.listLoading = true
      gradeApi.search({className: null,courseName: null,stuName: null}).then(data => {
        this.tableData = data.response
        this.listLoading = false
      })
    },
     getClass() {
      this.formLoading = true;
      classApi.getClassPageList({ condition: null, pageIndex: 1, pageSize: 100 })
        .then(res => {
          this.formLoading = false;
          if (res.code == 1) {
            this.classList = res.response.list;
          }
        })
        .catch(res => {
          this.formLoading = false;
        });
    },
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()
    },
    sexFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.sexEnum, cellValue)
    },
    statusFormatter (isEnabled) {
      return this.enumFormat(this.statusEnum, isEnabled)
    },
    statusTagFormatter (isEnabled) {
      return this.enumFormat(this.statusTag, isEnabled)
    },
    statusBtnFormatter (isEnabled) {
      return this.enumFormat(this.statusBtn, isEnabled)
    }
  },

  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.student.sexEnum,
      statusEnum: state => state.student.statusEnum,
      statusTag: state => state.student.statusTag,
      statusBtn: state => state.student.statusBtn,
    })
  }
}
</script>
